<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
	<meta name="format-detection" content="telephone=no,address=no,email=no"/>
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<title>KAA电商管理后台_商品分类</title>
	<script type="text/javascript" src="${path}/js/jquery-2.1.1.min.js"></script>
	<script src="js/sidebar-menu.js"></script>
	<link href="css/login.css" rel="stylesheet" media="all">
</head>
<body class="main">
	<h1>KAA电商管理后台</h1>
	<jsp:include page="sidebarNav.jsp"></jsp:include><!-- main_sidebar -->

	<div class="main_con_wrap">
		<div class="main_con goodscat_add">
			<form name="form" method="post"
				  action="${path}/addCategory" id="form" class="goodscatadd_fr fl" >
			<div>
				<div class="goodscatadd_title">
					<h3>添加修改分类</h3>
				</div>
				<div class="form-goodscatadd">
					<label for="">分类级别：</label>
					<select class="form-select" id="cate" name="cate" onchange="chooseCategory(this.value);">
						<option value="1"${category == 1 ||category == null ? 'selected':""}>一级分类</option>
						<option value="2"${category == 2 ? 'selected':""}>二级分类</option>
						<option value="3"${category == 3 ? 'selected':""}>三级分类</option>
					</select>
					<div class="clear"></div>
				</div>
				<div class="form-goodscatadd">
					<label for="">上级分类</label>
					<c:if test="${category ==0 || category == null}">
						<select name="superior" id="superior" class="form-select">
							<option value="1">选择分类</option>
						</select>
					</c:if>
					<c:if test="${category == 2}">
						<select name="superior" id="superior" class="form-select">
							<option value="1">选择分类</option>
							<c:forEach items="${list}" var="items1">
								<option class="goodscat_two" value="${items1.id}">${items1.categoryName}</option>
							</c:forEach>
						</select>
					</c:if>
					<c:if test="${category==3}">
						<select name="superior" id="superior" class="form-select">
							<option value="1">选择分类</option>
							<c:forEach items="${list}" var="items1">
								<option class="goodscat_two" value="${items1.id}">${items1.subCategoryName}</option>
							</c:forEach>
						</select>
					</c:if>
					<div class="clear"></div>
				</div>
				<div class="form-goodscatadd">
					<label for="">分类名称：</label>
					<input type="text" class="form-input-goodscatadd" id="classificationName" name="classificationName">
					<div class="clear"></div>
				</div>

				<div class="form-goodscatadd" style="text-align:center;margin-top:15px;">
					<button name="button" class="goodscatadd_btn btn"  id="goodscatadd_btn" type="submit">保  存</button>
				</div>
			</div>
			</form><!-- goodscatadd_fr -->
			<form name="form1" method="post"
				  action="${path}/integralList" id="form1" class="goodscatadd fl">
			<div id="goodscatadd">
				<c:forEach items="${categoryList}" var="items">
				<ul class="first_goodscat">
					<li class="treeview" name="li">
						<h4 class="h3" id="change10_${items.id}" style="display: block">${items.categoryName}</h4>
						<h4 class="h3" id="change11_${items.id}" style="display: none"><input id="catName_${items.id}" name="catName_${items.id}" value="${items.categoryName}" type="text"></h4>
						<div class="goodscat_tog"></div>
						<div class="goodscat_del">
							<a class="edit_but" id="change8_${items.id}" onclick="update4(${items.id})" style="display: block">编辑</a>
							<a class="edit_but" id="change9_${items.id}" onclick="update5(${items.id})" style="display: none">确定</a>
							<input class="del_but" value="删除" onclick="del1(${items.id})" type="button">
							<div class="clear"></div>
						</div>
						
						<div class="clear"></div>
						<a href="#">
						</a>
						<c:forEach items="${items.subCategories}" var="items1">
						<ul class="treeview-menu second_goodscat" style="display: none;">
						  <li class="treeview" name="li">
							  <h4 class="h3" id="change6_${items1.id}" style="display: block">${items1.subCategoryName}</h4>
							  <h4 class="h3" id="change7_${items1.id}" style="display: none"><input id="subName_${items1.id}" name="subName_${items1.id}" value="${items1.subCategoryName}" type="text"></h4>
							<div class="goodscat_tog"></div>
							<div class="goodscat_del">
								<a class="edit_but" id="change4_${items1.id}" onclick="update2(${items1.id})" style="display: block">编辑</a>
								<a class="edit_but" id="change5_${items1.id}" onclick="update3(${items1.id})" style="display: none">确定</a>
								<input class="del_but" value="删除" onclick="del2(${items1.id})" type="button">
								<div class="clear"></div>
							</div>
							
							<div class="clear"></div>
							<a href="#">
							</a>
							  <c:forEach items="${items1.colorSizes}" var="items2">
							<ul class="treeview-menu third_goodscat" style="display: none;">
								<li name="li">
									<h4 class="h3" id="change2_${items2.id}" style="display: block">${items2.colorSizeName}</h4>
									<h4 class="h3" id="change3_${items2.id}" style="display: none"><input id="colorName_${items2.id}" name="colorName_${items2.id}" value="${items2.colorSizeName}" type="text"></h4>
									<div class="goodscat_tog"></div>
									<div class="goodscat_del">
											<a class="edit_but" id="change_${items2.id}" onclick="update(${items2.id})" style="display: block">编辑</a>
											<a class="edit_but" id="change1_${items2.id}" onclick="update1(${items2.id})" style="display: none">确定</a>
										<input class="del_but" value="删除" onclick="del3(${items2.id})" type="button">
										<div class="clear"></div>
									</div>
									
									<div class="clear"></div>
								</li>
							</ul><!-- third_goodscat -->
							  </c:forEach>
						  </li>
						</ul><!-- second_goodscat -->
						</c:forEach>
						<div class="clear"></div>
					</li>

				</ul><!-- first_goodscat -->

				</c:forEach>
			</div>
			</form><!-- #goodscatadd -->
			<div class="clear"></div>

		</div><!-- main_con -->
	</div><!-- main_con_wrap -->
	<form name="form2" method="post"
		  action="${path}/deleteColorSize" id="form2">
		<input id="colorSizeId" name="colorSizeId" style="display: none">
	</form>
	<form name="form3" method="post"
		  action="${path}/classifyList" id="form3">
		<input id="category" name="category" style="display: none">
	</form>
	<form name="form4" method="post"
		  action="${path}/deleteSubCategory" id="form4">
		<input id="subCategoryId" name="subCategoryId" style="display: none">
	</form>
	<form name="form5" method="post"
		  action="${path}/deleteCategory" id="form5">
		<input id="categoryId" name="categoryId" style="display: none">
	</form>
	<form name="form6" method="post"
		  action="${path}/updateColorSize" id="form6">
		<input id="colorSizeIds" name="colorSizeIds" style="display: none">
		<input id="colorNames" name="colorNames" style="display: none">
	</form>

	<form name="form7" method="post"
		  action="${path}/updateSubCategory" id="form7">
		<input id="subIds" name="subIds" style="display: none">
		<input id="subNames" name="subNames" style="display: none">
	</form>

	<form name="form8" method="post"
		  action="${path}/updateCategory" id="form8">
		<input id="catIds" name="catIds" style="display: none">
		<input id="catNames" name="catNames" style="display: none">
	</form>
	<div class="footer_copyright">
		<p>苏州知行合一网络科技有限公司提供技术支持，版权所有</p>
	</div><!-- footer_copyright -->

<script>
	/////////////////////////侧边栏按钮
	$.sidebarMenu($('.sidebar-menu'))   
	
	/////////////////////////
	$.sidebarMenu($('.first_goodscat')) 
     
	function del1(value) {
		$("#categoryId").val(value)
		document.getElementById("form5").submit();
    }
    
    function del2(value) {
	    $("#subCategoryId").val(value)
		/*document.getElementById("form4").submit();*/
		
    }
    
    function del3(value) {
        $("#colorSizeId").val(value)
        document.getElementById("form2").submit();
    }
    
    function chooseCategory(value) {
		$("#category").val(value)
		document.getElementById("form3").submit();
    }

    function update4(value) {
        $("#change8_"+value).css("display","none");
        $("#change9_"+value).css("display","block");
        $("#change10_"+value).css("display","none");
        $("#change11_"+value).css("display","block");

    }

    function update5(value) {
        var catName=$("#catName_"+value).val()
        $("#catIds").val(value)
        $("#catNames").val(catName)
        document.getElementById("form8").submit();
    }

    function update2(value) {
        $("#change4_"+value).css("display","none");
        $("#change5_"+value).css("display","block");
        $("#change6_"+value).css("display","none");
        $("#change7_"+value).css("display","block");

    }

    function update3(value) {
        var subName=$("#subName_"+value).val()
        $("#subIds").val(value)
        $("#subNames").val(subName)
        document.getElementById("form7").submit();
    }

    function update(value) {
        $("#change_"+value).css("display","none");
        $("#change1_"+value).css("display","block");
        $("#change2_"+value).css("display","none");
        $("#change3_"+value).css("display","block");

    }

    function update1(value) {
	    var colorName=$("#colorName_"+value).val()
		$("#colorSizeIds").val(value)
		$("#colorNames").val(colorName)
		document.getElementById("form6").submit();
    }
 
</script>

</body>
</html>